<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=4bfabab58cf967ecf0c39d3a78a20cdb"></script>
	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	
	<title>浏览器定位</title>
	<!---->
	<style type="text/css">
		.info-title {
			color: white;
			font-size: 14px;
			background-color: blue;
			line-height: 26px;
			padding: 0px 0 0 6px;
			font-weight: lighter;
			letter-spacing: 1px
		}

		.info-content {
			font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
			padding: 4px;
			color: #666666;
			line-height: 23px;
		}

		.info-content img {
			float: left;
			margin: 3px;
		}
	</style>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.6&key=4bfabab58cf967ecf0c39d3a78a20cdb&plugin=AMap.AdvancedInfoWindow"></script>
	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

	<body>
		<div id='container'></div>
		<div id="tip"></div>
		<!---->
		<div class="button-group">
			<input type="button" class="button" value="信息窗体1" onclick="infowindow1.open(map,lnglat)" />
		</div>
		<script type="text/javascript">
			var lnglat;;
			var map = new AMap.Map('container', {
				resizeEnable: true,
				center: lnglat,
				zoom: 15
			});
			var marker = new AMap.Marker({
				position: lnglat
			});
			marker.setMap(map);

			var content = '<div class="info-title">高德地图</div><div class="info-content">' +
				'<img src="http://webapi.amap.com/images/amap.jpg">' +
				'高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。<br/>' +
				'<a target="_blank" href = "http://mobile.amap.com/">点击下载高德地图</a></div>';
			var infowindow1 = new AMap.AdvancedInfoWindow({
				content: content,
				offset: new AMap.Pixel(0, -30)
			});
		</script>
		<!---->
		<script type="text/javascript">
			/***************************************
							由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
							***************************************/
			var map, geolocation;
			//加载地图，调用浏览器定位服务
			map = new AMap.Map('container', {
				resizeEnable: true
			});
			map.plugin('AMap.Geolocation', function () {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, //是否使用高精度定位，默认:true
					timeout: 10000, //超过10秒后停止定位，默认：无穷大
					buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					buttonPosition: 'RB'
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
				AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
			});
			//解析定位结果
			function onComplete(data) {
				var str = ['定位成功'];
				str.push('经度：' + data.position.getLng());
				str.push('纬度：' + data.position.getLat());
				if (data.accuracy) {
					str.push('精度：' + data.accuracy + ' 米');
				} //如为IP精确定位结果则没有精度信息
				str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
				document.getElementById('tip').innerHTML = str.join('<br>');

				var EARTH_RADIUS = 6378137.0; //单位M
				var PI = Math.PI;

				function getRad(d) {
					return d * PI / 180.0;
				}

				function getFlatternDistance(lat1, lng1, lat2, lng2) {
					var f = getRad((lat1 + lat2) / 2);
					var g = getRad((lat1 - lat2) / 2);
					var l = getRad((lng1 - lng2) / 2);

					var sg = Math.sin(g);
					var sl = Math.sin(l);
					var sf = Math.sin(f);

					var s, c, w, r, d, h1, h2;
					var a = EARTH_RADIUS;
					var fl = 1 / 298.257;

					sg = sg * sg;
					sl = sl * sl;
					sf = sf * sf;

					s = sg * (1 - sl) + (1 - sf) * sl;
					c = (1 - sg) * (1 - sl) + sf * sl;

					w = Math.atan(Math.sqrt(s / c));
					r = Math.sqrt(s * c) / w;
					d = 2 * w * a;
					h1 = (3 * r - 1) / 2 / c;
					h2 = (3 * r + 1) / 2 / s;

					return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
				}

				var stance = new XMLHttpRequest();
				stance.open("GET", "json/data.json");
				stance.send();
				stance.addEventListener("readystatechange", function () {
					if (stance.readyState == 4) {
						if (stance.status == 200) {
							var placeInfo = JSON.parse(stance.responseText);
							lnglat = [placeInfo[calculate(placeInfo)].JD, placeInfo[calculate(placeInfo)].WD];
							console.log(calculate(placeInfo));
						}
					}
				})

				var arr = [];

				function calculate(res) {
					for (var k = 0; k < res.length; k++) {
						arr[k] = parseFloat(getFlatternDistance(data.position.getLat(), data.position.getLng(), res[k].JD, res[k].WD));
					}
					console.log(arr);
					console.log(abc());
					console.log(data.position.getLat());
					return abc();
				}

				function abc() {
					var mins = arr[0];
					console.log(arr[0])
					for (var m = 0; m < arr.length; m++) {
						if (arr[m] < mins) {
							mins = arr[m];
						}
					}
					console.log(mins, arr);
					for (var n = 0; n < arr.length; n++) {
						if (arr[n] == mins) {
							return n;
						}
					}
				}

			}
			//解析定位错误信息
			function onError(data) {
				document.getElementById('tip').innerHTML = '定位失败';
			}
		</script>
	</body>

</html>